<!-- home -->
<template>
  <div class="contacts-container" ref="wrapper">
    <van-index-bar :index-list="pyList">
      <template v-for="py in pyList" >
        <van-index-anchor :index="py" :key="py"/>
        <ContactItem
          v-for="item in contactList.filter(user => user.py.toUpperCase() == py)"
          :key="item.id"
          :name="item.name"
          :avatar="item.avatar"
          :online="item.online"
          @click="handleClick(item.id)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
// 请求接口
import ContactItem from '@/components/ContactItem'
import { mapGetters, mapActions } from 'vuex'
// import BScroll from 'better-scroll'

export default {
  name: 'ContactList',
  components: {
    ContactItem
  },
  data() {
    return {
      loading: false,
      finished: true
    }
  },
  computed: {
    ...mapGetters([
      'contactList'
    ]),
    pyList() {
      const list = this.contactList.map(item => item.py.toUpperCase())
      return [...new Set(list)].sort()
    }
  },
  async mounted() {
    await this.initData()
    // this.initBs()
  },
  methods: {
    onLoad() {},
    ...mapActions({
      getContactList: 'contact/getContactList'
    }),
    async initData() {
      await this.getContactList()
    },
    handleClick(id) {
      this.$router.push({
        name: 'ContactInfo',
        params: { id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.contacts-container {
  background: #fff;
  padding: $nav-bar-height 0 $tab-bar-height;
  // height: 100%;
}
</style>
